<!-- *Author: 黄旗, *Date: 2020-08-04 15:45:59 -->
<template>
    <Card :bordered="false" dis-hover >
        <div class="searchBox">
            <Input search placeholder="搜索图片/视频标签"  v-model="remark" style="width:200px;" @on-search="searchInput" ></Input>
            <Button type="primary" style="margin-left:20px;height: 35px;width:60px;font-size:16px" @click="changeuplod" v-hasC="{name: '-v1-material-img-img-upload',flag: '/v1/material/img/img-upload'}">上传</Button>
        </div>
        <Tabs v-model="names" :animated="false" @on-click="initial" class="tabs">
            <TabPane label="热门" name="name1">
                <hotImage ref="hotimage" :remark="remark"></hotImage>
            </TabPane>
            <TabPane label="图片" name="name2">
                <myImage ref="myimage" :remark="remark"></myImage>
            </TabPane>
            <TabPane label="视频" name="name3">
                <myvideo ref="myvideo" :remark="remark"></myvideo>
            </TabPane>
            <TabPane label="回收站" name="name4">
                <returnSourse ref="returnsourse" :remark="remark"></returnSourse>
            </TabPane>

        </Tabs>
        <!-- modal上传图片和视频 -->
        <Modal class="modalM" v-model="modalstatus" title="上传" width="750" footer-hide @on-cancel="changemodal" :mask-closable="false">
            <!-- <upload></upload> -->
            <div >
                <Tabs type="card">
                    <TabPane label="上传图片">
                        <uplodimg ref="uplodimg"></uplodimg>
                    </TabPane>
                    <TabPane label="上传视频">
                        <uplodvideos ref="uplodvideos"></uplodvideos>
                    </TabPane>
                </Tabs>
            </div>
        </Modal>
        <div class="myModal" v-show="modalShow">
            <span>暂无权限</span>
        </div>
    </Card>

</template>
<script>
    import { materialCheck } from '@/api/myuplod.js'
    import myImage from './components/image.vue'
    import myvideo from './components/video.vue'
    import upload from './uplod.vue'
    import uplodimg from './components/uplodimg.vue'
    import uplodvideos from './components/uplodvideos.vue'
    import hotImage from './components/hotImage.vue'
    import returnSourse from './components/returnSourse.vue'

    export default {
        components: { myImage, myvideo, upload, hotImage, returnSourse, uplodimg, uplodvideos },
        name: '',
        data () {
            return {
                names: 'name2',
                modalstatus: false,
                remark: '',
                modalShow: false
            };
        },
        mounted () {
            this.initial('name2')
            this.getSource()
        },
        methods: {
            searchInput () {
                this.initial(this.names)
            },
            initial (name) {
                if (name == 'name1') {
                    this.$refs.hotimage.initial();
                } else if (name == 'name2') {
                    this.$refs.myimage.initial();
                } else if (name == 'name3') {
                    this.$refs.myvideo.initial();
                } else if (name == 'name4') {
                    this.$refs.returnsourse.initial();
                }
            },
            changesearch () {
            },
            changeuplod () {
                this.modalstatus = true
            },
            changemodal () {
                this.modalstatus = false
                this.$refs.uplodimg.initial();
                this.$refs.uplodvideos.initial();
                this.searchInput()
            },
            getSource () {
                materialCheck().then(res => {
                    if (res.sck_status == 0) {
                        this.modalShow = true
                    } else {
                        this.modalShow = false
                    }
                    this.log(res, 'sourse')
                })
            }
        }
    }
</script>
<style lang="less" scoped>
/deep/.ivu-scroll-container{
    overflow-y: auto;
    overflow-x: hidden;
}
.searchBox{
    // text-align: center;
    position: absolute;
    right: 14px;
    top: 10px;
    z-index: 1;
    /deep/ .ivu-input{
        height: 35px;
        &-icon{
            width: 51px;
            line-height: 35px;
            font-size: 24px;
        }
    }
}
.tabs{
    // margin:20px 0;
    /deep/.ivu-tabs-nav-scroll{
        font-size: 16px;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
.modalM{
    position: relative;
}
.divIcon{
    position: absolute;
    top:10px;
    right:8px;
    z-index:11;
}
.myModal{
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left: 0;
    background: #000;
    opacity: 0.6;
    /* z-index: 999; */
}
.myModal span{
    color: #fff;
    position: absolute;
    font-size: 20px;
    top:50%;
    left: 50%;
}
</style>
